<template>
  <div>
    <div class="top">
      <div class="header">
        <van-nav-bar title="我的团队" left-arrow @click-left="onClickLeft" />
      </div>

      <div class="top-content">
          <div class="content">
              <span class="money">{{impactNumber.first_impact}}</span>
              <span class="yuan">直接影响（人）</span>
          </div>
          <div class="content">
              <span class="money">{{impactNumber.all_impact}}</span>
              <span class="yuan">累计影响（人）</span>
          </div>
          <div class="content">
              <span class="money">{{impactNumber.secend_impact}}</span>
              <span class="yuan">间接影响（人）</span>
          </div>
      </div>
    </div>
    <div class="tab">
        <van-tabs>
            <van-tab title="直接影响">
                <div class="div" v-for="(item,index) in lower" :key="index">
                    <img :src="item.avatar	" class="img" />
                    <div class="center">
                        <span class="name">{{item.username}}</span>
                        <span class="time">注册：{{item.createtime}}</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <div class="right-top-left">
                                <img src="../assets/images/huiyuan@3x.png" v-if="item.vip_type_name == '超级会员'">
                                <img src="../assets/images/ic_shenfenrenzheng@2x.png" alt=""  v-if="item.vip_type_name == '普通会员'">
                                <img src="../assets/images/hehuoren.png" alt=""  v-if="item.vip_type_name == '城市合伙人'">
                                <img src="../assets/images/fuwushang@3x.png" alt=""  v-if="item.vip_type_name == '城市服务商'">
                                <span>{{item.vip_type_name}}</span>
                            </div>
                            <span >{{item.mobile_change}}</span>
                        </div>
                        <span class="add">影响总人数：{{item.all_impact}}</span>
                    </div>
                </div>

            </van-tab>
            <van-tab title="间接影响">
                <div class="div" v-for="(item,index) in secLower" :key="index">
                    <img :src="item.avatar	" class="img" />
                    <div class="center">
                        <span class="name">{{item.username}}</span>
                        <span class="time">注册：{{item.createtime}}</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <div class="right-top-left">
                                <img src="../assets/images/huiyuan@3x.png" v-if="item.vip_type_name == '超级会员'">
                                <img src="../assets/images/ic_shenfenrenzheng@2x.png" alt=""  v-if="item.vip_type_name == '普通会员'">
                                <img src="../assets/images/hehuoren.png" alt=""  v-if="item.vip_type_name == '城市合伙人'">
                                <img src="../assets/images/fuwushang@3x.png" alt=""  v-if="item.vip_type_name == '城市服务商'">
                                <span>{{item.vip_type_name}}</span>
                            </div>
                            <span >{{item.mobile_change}}</span>
                        </div>
                        <span class="add">推荐人：{{item.parent_username}}</span>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: "my_share_team",
  data() {
    return {
    uid:"",
    impactNumber: {},
    lower: "",
    secLower: "",
    };
  },
  created() {},
  mounted() {
      if(this.$route.query.uid){
          this.uid = this.$route.query.uid
      };
      this.getImpactNumber();
      this.getLower();
      this.getSecLower();
  },
  methods: {
    onClickLeft() {
       this.$router.back();
    },
    async getImpactNumber() {
        let params = {
            token: this.$cookies.get("token"),
        };
        const res = await this.$axios.post(this.$api.getImpactNumber, params);
        if (res.code == 1) {
            this.impactNumber = res.data;
        } else {
            this.$toast("获取我的影响人数失败：" + res.msg);
        }
    },
    async getLower() {
        let params = {
            token: this.$cookies.get("token"),
            user_id: "",
            page: "",
        };
        const res = await this.$axios.post(this.$api.getLower, params);
        if (res.code == 1) {
            this.lower = res.data;
        } else {
            this.$toast("获取我的下级用户失败："+ res.msg);
        }
    },
    async getSecLower() {
        let params = {
            token: this.$cookies.get("token"),
            user_id: "",
            page: "",
        };
        const res = await this.$axios.post(this.$api.getSecLower, params);
        if (res.code == 1) {
            this.secLower = res.data;
        } else {
            this.$toast("获取我的间接用户失败" + res.msg)
        }
    }
    }
  }

</script>

<style scoped>
.header >>> .van-nav-bar .van-icon {
  color: #fff;
}
.header{
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
}
.van-nav-bar {
  background-color: #75c2f1;
  border: none;
}
.van-nav-bar__title {
  color: white !important;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.top {
  background-image: url("../assets/images/bg@3x.png");
  height: 2.45rem;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.top-content{
    height: 2.7rem;
    /* height: 77.55%; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 8%;
    padding-right: 7%;
    align-items: center;
}
.content{
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
}
.money{
    font-size: .18rem;
    font-family:PingFangSC;
    font-weight:400;
}
.yuan{
    font-size: .1rem;
    font-family:PingFangSC;
    font-weight:400;
}
.tab >>> .van-tabs__line{
    background-color: white;
}
.tab >>> .van-tab--active{
    color: #00C6D8;
}
.tab >>> .van-tab{
    font-size:.16rem;
    font-family:PingFangSC;
    font-weight:400;
}
.div{
     width:100%;
     height:.6rem;
     background:white;
     /* margin-left:5%; */
     display: flex;
     margin-top: .09rem;
}
.img{
    width: 0.42rem;
    height: 0.42rem;
    margin-left: 5%;
    display: flex;
    justify-content: center;
    margin-top: 2.5%;
}
.center{
    width: 35%;
    padding-left: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.name{
    font-size:.14rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(52,52,52,1);
}
.time{
    font-size:.12rem;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(139,139,139,1);
    padding-top: 5%;
}
.right{
    width: 55%;
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-right: 5%;
}
.right-top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* justify-content: flex-end; */
    margin-top: .1rem;
    margin-bottom: 6%;
}
.right-top img{
    width: .13rem;
    height: .13rem;
    margin-right: 5%;
}
.right-top span{
    font-size:.12rem;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(139,139,139,1);
}

.add{
    font-size:.12rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(0,198,216,1);
    line-height:.2rem;
}
.right-top-left{
    width:50%;
    text-align:left;
}


</style>




